<template>
  <div class="goods">
    <div class="good-title">{{cateName.toUpperCase()}}
      <el-radio-group v-model="searchVal" class="search-tab" v-if="subCategory !== null">
        <el-radio-button label="0">All</el-radio-button>
        <el-radio-button v-for="data in subCategory" :key="data.id" :label="data.id.toString()">{{data.name}}</el-radio-button>
      </el-radio-group>
    </div>
    <el-row>
      <el-col v-for="(item, index) in goodsData" :key="index">
        <el-card  :body-style="{ padding: '0px' }">
          <div class="content" @click="handleAddCart(item)">
            <div class="no-food" v-if="item.isOnSale == 1">
              <img src="../assets/images/no-food.png">
            </div>
            <img v-lazy="item.picUrl" class="image" alt=""/>
            <div class="position">
              <div v-if="item.allergensExtra">
                <p v-for="(v,i) in JSON.parse(item.allergensExtra)" :key="i"><img :src="`https://sidequest-1307226287.cos.eu-frankfurt.myqcloud.com/gmy/${v}.png`" alt=""></p>
              </div>
            </div>
            <div style="padding: 14px 0; text-align: left">
              <div class="bottom">
                <div :style="{textDecoration:item.isOnSale!==1?'none':'line-through'}">{{item.name}}</div>
                <div v-if="item.name!='FreeTime'" class="retailPrice"  :style="{background: item.isOnSale!==1?'#FFD40E':'#efefef',textDecoration:item.isOnSale!==1?'none':'line-through'}">£{{ item.retailPrice }}</div>
                <div v-else>Min:{{ item.retailPrice }}</div>

<!--                <div v-if="item.name!='TopUp'&&item.name!='FreeTime'"><el-button @click="handleAddCart(item)" type="text" class="button">Add to cart</el-button></div>-->
<!--                <div v-else-if="item.name=='FreeTime'"><el-button @click="handleAddCart(item)" type="text" class="button">Relationship</el-button></div>-->
<!--                <div v-else><el-button @click="handleAddCart(item)" type="text" class="button">TopUp</el-button></div>-->
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <good-detail v-if="dialogVisible" :userData="userData" :goodData="good" :cateName="cateName" :dialogVisible="dialogVisible" @handleGoodClose="handleGoodClose" @handlePassword="handlePassword"></good-detail>

    <payment v-if="paymentVisible" :paymentData="{goodsList:[paymentData],total:total}" :paymentVisible="paymentVisible"
              @handlePayClose="handlePayClose"></payment>
    <payment-admin v-if="paymentAdminVisible" :paymentData="{goodsList:[paymentData],total:total}" :balance="balance" :paymentAdminVisible="paymentAdminVisible"
                   @handlePayAdminClose="handlePayAdminClose"></payment-admin>
    <charge v-if="balanceCharge" :paymentData="{goodsList:[paymentData],total:total}" :balanceCharge="balanceCharge"
                   @handlePayAdminClose="handlePayAdminClose"></charge>
    <freeVue v-if="chargeFreeTime" :paymentData="{goodsList:[paymentData],total:total}" :chargeFreeTime="chargeFreeTime"
            @handlePayAdminClose="handlePayAdminClose"></freeVue>
    <password v-if="passwordVisible" :passwordVisible="passwordVisible"
              @handleClose="handlePayClose" @handlePayment="handlePayment"></password>
  </div>
</template>

<script>
import GoodDetail from "./goodDetail";
import payment from "./payment";
import PaymentAdmin from "./payment-admin";
import charge from "./charge";
import freeVue from "./freeTime";
import password from '../components/password'

import {mapState} from "vuex";
export default {
  name: "goods",
  components: {PaymentAdmin, GoodDetail,payment,charge,freeVue,password},
  props:{
    subCategory:{
      type:Array,
      defaulted:[]
    },
    goods:{
      type:Array,
      defaulted:[]
    },
    userData:{
      type:Object,
      defaulted:{}
    },
    cateName:{
      type:String,
      defaulted:''
    }
  },
  data(){
    return{
      dialogVisible:false,
      paymentVisible: false,
      paymentAdminVisible: false,
      passwordVisible: false,
      balanceCharge:false,
      chargeFreeTime:false,
      good:'',
      total:0,
      balance:0,
      paymentData:{},
      isManager:false,
      searchVal:'0',
    }
  },
  computed: {
    ...mapState({typeStatus:state => state.comData.typeStatus}),
    goodsData(){
      let data = []
      if(Number(this.searchVal)){
        data = this.goods.filter(item => {
          if(this.searchVal == item.subCategory) return item
        })
      }else {
        data = this.goods
      }
      return data
    }
  },
  methods:{
    /**
     * 添加商品
     * @param data
     */
    handleAddCart(data){
      this.dialogVisible = true
      this.good = data
    },
    handleGoodClose(){
      this.dialogVisible = false
    },

    handlePassword(v){
      this.handleGoodClose()
      this.paymentData = v.paymentData
      this.total = v.total
      this.passwordVisible = true
    },

    handlePayment(){
      this.balance = this.userData.balance
      this.passwordVisible = false
      if(this.cateName === 'Bundles'){
        this.paymentAdminVisible = true
      }
      else if(this.paymentData.name=="TopUp"){
        this.typeStatus?this.balanceCharge = true:this.paymentVisible = true
      } else if(this.paymentData.name=="FreeTime"){
        this.typeStatus?this.chargeFreeTime = true:this.paymentVisible = true
      } else{
        this.typeStatus?this.paymentAdminVisible = true:this.paymentVisible = true
      }
    },
    handlePayClose() {
      this.paymentVisible = false
      this.passwordVisible = false
    },
    /**
     * 关闭支付弹窗
     */
    handlePayAdminClose() {
      this.paymentAdminVisible = false,
      this.balanceCharge = false,
      this.chargeFreeTime=false
    },


  }
}
</script>

<style scoped lang="scss">
  .goods{
    width: 100%;
    height: calc(100% - 84px);
    padding: 44px 0 22px 60px;
    ::v-deep .search-tab{
      margin-left: 10px;
      .el-radio-button__inner{
        background: none;
        color: #ffffff;
        border: none;
      }
      .is-active{
        .el-radio-button__inner{
          color: #333333;
          background: #FFE96B;
          border-radius: 30px;
          box-shadow: none;
        }
      }
    }
    .good-title{
      font-size: 50px;
      color: #ffffff;
      text-align: left;
      padding-bottom: 32px;
      padding-top: 30px;
    }
    ::v-deep .el-row{
      height: calc(100% - 17vh);
      overflow-y: auto;
      padding: 0 77px;
    }
    ::v-deep .el-col{
      width: 15.04vw;
      height: 28.03vh;
      padding: 0!important;
      border-radius: 14px;
      position: relative;
      margin: 0 1vw 2vw;
      background: #efefef;
      .image {
        width: 100%;
        height: 100%;
      }
      .el-card.is-always-shadow{
        box-shadow: none;
      }
      .el-card{
        background: none;
        border: none;
        height: 100%;
        .el-card__body{
          height: 100%;
          position: relative;
          .content{
            width: 100%;
            height: 100%;
            position: relative;
            .no-food{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(255,255,255,.4);
              z-index: 8;
              text-align: center;
              img{
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
              }
            }
          }
          .flex{
            display: flex;
            justify-content: space-between;
          }
          .position{
            position: absolute;
            height: 50px;
            right: 10px;
            top: 20px;
            div{
              display: flex;
              justify-content: flex-start;
              p{
                width: 38px;
                height: 38px;
                margin-left: 10px;
              }
            }
          }
          .bottom{
            position: absolute;
            bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(100% - 30px);
            margin: 0 10px;
            padding-left: 10px;
            height: 6.3vh;
            background: #ffffff;
            border-radius: 6px;
            overflow: hidden;
            div{
              color: #141413;
            }
            div:first-child{
              padding-right: 10px;
            }
            .retailPrice{
              line-height: 6.3vh;
              background: #FFD40E;
              padding: 0 10px;
            }
          }
          button{
            width: 97px;
            height: 33px;
            background: linear-gradient(270deg, #5E3BD6 0%, #1BBAC2 100%);
            border-radius: 21px;
            color: #ffffff;
            padding: 0;
            border: none;
          }

        }
      }
    }
  }
</style>
